<template>
	<view class="my-layout">
		<view class="bank-card" v-for="(item,index) in  cardList" :key='index' @tap='goShop(item)'>
			<view class="card-top">
				<view class="top-left">
					<!-- <image class="left-img" :src="cardTypes[item.type].topImg" mode="widthFix"></image> -->
					<image class="left-img" src="/static/shop/amazon.png" mode="widthFix"></image>
					<text class="left-name">{{ item.name }}</text>
				</view>
				<view class="top-right">
					<view class="right-text">返佣</view>
					<view class="right-num">{{item.back}}%</view>
				</view>
			</view>
			<view class="card-bottom">
				<view class="bottom-left">
					<image class="vip-icon" :src="vip[item.type].url" mode="widthFix"></image>
					<text class="vip-name">{{vip[item.type].name}}</text>
				</view>
				<view class="vip-way">{{vip[item.type].name}}专属通道</view>
			</view>
			<view class="card-mask" v-if="item.lock" @click.stop="goUnlock">
				<view class="mask-btn">
					<image class="btn-icon" src="/static/shop/lock.png" mode="widthFix"></image>
					<view class="btn-text">待解锁</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardList: [{
					type: 0,
					back: 0.2,
					name: 'Amazon',
					lock: true
				}, {
					type: 1,
					back: 0.4,
					name: 'Amazon',
					lock: false
				}],
				vip: {
					0: {
						url: '/static/shop/baiyin.png',
						name: '白银会员'
					},
					1: {
						url: '/static/shop/huangjin.png',
						name: '黄金会员'
					},

					2: {
						url: '/static/shop/bojin.png',
						name: '铂金会员'
					},
					3: {
						url: '/static/shop/zhuanshi.png',
						name: '钻石会员'
					},
					4: {
						url: '/static/shop/huangguan.png',
						name: '皇冠会员'
					},
					5: {
						url: '/static/shop/zhizhun.png',
						name: '至尊会员'
					}
				},
				types: {
					0: {
						url: '/static/shop/amazon.png',
						name: '白银会员'
					},
				},
			};
		},
		methods: {
			goShop(item) {
				if (item.lock) {

				} else {
					uni.navigateTo({
						url: '/pages/shopping/shopWay/shopWay?name='+item.name
					})
				}

			},
			goUnlock() {
				uni.showModal({
					title: '温馨提示',
					content: '钻石会员大厅需要余额达到 600 才可以进入',
					showCancel: false,
					confirmColor: '#F59328',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-layout {
		background-color: #F4F5F9;
		padding: 20rpx 42rpx;
	}

	.bank-card {
		position: relative;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;

		.card-top {
			height: 150rpx;
			padding: 15rpx 38rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFAA3B;

			.top-left {
				.left-img {
					width: 120rpx;
					vertical-align: middle;
				}

				.left-name {
					margin-left: 15rpx;
					font-size: 36rpx;
					color: #FFFFFF;
					vertical-align: middle;
				}
			}

			.top-right {
				.right-text {
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					height: 40rpx;
					text-align: right;
				}

				.right-num {
					font-size: 36rpx;
					color: #FFFFFF;
					height: 56rpx;
					line-height: 56rpxs;
				}
			}
		}

		.card-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 24rpx;
			background-color: #FFFFFF;

			.bottom-left {
				.vip-icon {
					width: 44rpx;
					vertical-align: middle;
				}

				.vip-name {
					margin-left: 6rpx;
					vertical-align: middle;
					font-size: 22rpx;
					color: #000000;
					height: 30rpx;
					line-height: 30rpx;
				}
			}

			.vip-way {
				font-size: 24rpx;
				color: #999999;
				height: 30rpx;
				line-height: 30rpx;
			}
		}

		.card-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba($color: #000000, $alpha: 0.5);
			z-index: 99;

			.mask-btn {
				position: absolute;
				top: 50%;
				right: 10%;
				transform: translateY(-50%);
				width: 100rpx;
				height: 100rpx;
				background-color: rgba($color: #000000, $alpha: 0.6);
				border-radius: 10rpx;
				text-align: center;

				.btn-icon {
					width: 33rpx;
					margin-top: 8rpx;
				}

				.btn-text {
					font-size: 24rpx;
					color: #FFFFFF;
					height: 33rpx;
					line-height: 33rpx;
					text-align: center;
				}
			}
		}

	}
</style>
